<template>
  <el-row >
    <el-col :span="12">
    <!--  商品图片  -->
      <el-carousel height="400px" motion-blur>
        <el-carousel-item v-for="(pic, index) in goods.picList" :key="index">
          <el-image
              :src="`${SERVER_ADDR}/goods/pic/${pic.url}`"
              style="height: 400px ; width:600px"
              fit="contain"
              ></el-image>
        </el-carousel-item>
      </el-carousel>
    </el-col>
    <el-col :span="12">
    <!-- 商品的基本信息 -->
      <div class="info">
        <div class="name">{{ goods.name }}</div>
        <div class="dscp">{{ goods.dscp }}</div>
        <div class="price">售价:￥{{ goods.price }}</div>
        <div class="markPrice">原价:￥{{ goods.markPrice }}</div>
        <div class="color"><span>颜色:{{ goods.color }}</span></div>
        <div class="version"><span>版本:{{ goods.version }}</span></div>
        <div class="count">数量:{{ goods.count }}</div>
        <div class="score">
          <el-rate
              v-model="goods.score"
              disabled
              show-score
              text-color="#FF6800"
              :color="['#FF6800','#FF6800','#FF6800']"
              score-template="{value} 分"
          />
        </div>
        <div class="goodsBtn">
          <el-button type="primary" size="large" @click="insertCart"><el-icon><ShoppingCart/></el-icon>加入购物车</el-button>
          <el-button type="info" size="large" v-if="!collectInfo" @click="collect">
            <el-icon>
              <StarFilled/>
            </el-icon>
            收藏
          </el-button>
          <el-button type="danger" size="large" v-else @click="cacelColllect">
            <el-icon>
              <Star/>
            </el-icon>
            取消收藏
          </el-button>
        </div>
      </div>
    </el-col>
  </el-row>
  <el-row>
  <!-- 商品详情/商品评价 -->
    <el-tabs model-value="first" class="demo-tabs">
      <el-tab-pane label=" 商品详情" name="first" v-html="goods.detail"></el-tab-pane>
      <el-tab-pane label="商品评价" name="second" v-html="goods.detail"></el-tab-pane>
    </el-tabs>
  </el-row>
</template>

<script setup>
import {useRoute} from "vue-router";
import goodsApi from "@/api/goodsApi.js";
import {ref} from "vue";
import collectApi from "@/api/collectApi.js";
import {ElMessage, ElMessageBox} from "element-plus";
import {useTokenStore} from "@/stores/token.js";
import cartApi from "@/api/cartApi.js";
import {useRouter} from "vue-router";

const router = useRouter();
const tokenStore = useTokenStore();
const collectInfo = ref(null);
const route = useRoute();
const goods = ref({});
const SERVER_ADDR = ref(import.meta.env.VITE_SERVER_ADDR);

function toCreateOrderPage() {
  //获取已选中的购物车Id
  let goodsId = route.query.id;
  router.push({
    path: "/user/createOrder",
    query: {
      goodsId
    }
  });
}


function  selectById() {
  let id = route.query.id;

  goodsApi.selectById(id)
      .then(resp => {
        goods.value = resp.data
        //获取当前商品收藏情况 -- 判断用户是否已经登录
        if (tokenStore.tokenStr != null) {
          getCollectInfo()
        }
      });
}

function getCollectInfo() {
  collectApi.selectByGoodsIdAndUserId(goods.value.id)
      .then(resp => {
        collectInfo.value = resp.data;
      })
}

//收藏
function collect() {
  collectApi.insert(goods.value.id)
      .then(resp => {
        if (resp.code == 10000) {
          ElMessage.success(resp.msg);
          //刷新收藏状态
          getCollectInfo();
        } else {
          ElMessage.error(resp.msg);
        }
      });
}

//取消收藏
function cacelColllect() {
  collectApi.delete(collectInfo.value.id)
      .then(resp => {
        if (resp.code == 10000) {
          ElMessage.success(resp.msg);
          //刷新收藏状态
          getCollectInfo();
        } else {
          ElMessage.error(resp.msg);
        }
      });
}
function insertCart(){
  cartApi.insert(goods.value.id)
      .then(resp =>{
        if(resp.code == 10000){
          ElMessageBox.confirm(
              '加入购物车成功是否跳转到购物车',
              '提示',
              {
                confirmButtonText: '是',
                cancelButtonText: '否',
                type:'info'
              }
          ).then(() => {
                router.push("/user/cart")
                });
        }else{
          ElMessage.error(resp.msg)
        }
      });
}
selectById()
</script>

<style scoped>
.el-carousel{
  margin: 15px 0px;
  border: 1px solid #AAA;
}
.info {
  margin: 30px 60px;
}
.info div{
  margin-bottom: 15px;
}
.info .name{
  font-size: 25px;
  font-weight: bold;
}
.info .dscp {
  color: #999;
}
.info .price {
  color: var(--theme-color);
  font-size:18px;
}
.info .markPrice {
  color:#999;
  font-size:15px;
  text-decoration: line-through;
}
.info span {
  display:inline-block;
  line-height: 30px;
  border:2px solid var(--theme-color);
  border-radius:5px;
  background-color: #FFF;
  padding: 0px 10px;
}
.info .count {
  font-size: 15px;
}
.el-icon{
  margin-right: 5px;
}
</style>